<template>
	<!-- 分类 -->
	<view class="pageV">
		<u-navbar title="分类" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="centV">
			<view class="leftV">
				<view @click="onLeftItemClick(item,inex)" :class="leftPos==inex? 'leftItemVTo':'leftItemV' "
					v-for="(item,inex) in leftList" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="rightV">
				<scroll-view style="height: 90vh;" scroll-y="true">
					<view style="display: block;" v-if="rightList.length>0">
						<view @click="onRightItem(shopData)" class="rightItemV" v-for="(shopData,key) in rightList"
							:key="key">
							<image class="rightIv" :src="shopData.image"></image>
							<view class="rightItemVV">
								<view class="rightTitle">{{shopData.title}}</view>
								<view class="rightMoneyV">
									<view class="rightMoneyTv1">¥</view>
									<view class="rightMoneyTv2">{{shopData.sales_price}}</view>
								</view>
								<view class="rightNumV">
									<view class="rightNumTv">已售卖{{shopData.sales}}件</view>
									<image class="rightNumIv" src="../../static/add_che.png"
										@click.stop="onAddClick(shopData,key)">
									</image>
								</view>
							</view>
						</view>
					</view>

					<view v-if="rightList.length==0"
						style="justify-content: center; align-items: center; display: flex; height: 50vh; color: #8D8D8D;">
						暂无数据，快试试其他分类吧~
					</view>
				</scroll-view>
			</view>
		</view>


		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="pupTopV">
					<view class="titleV">
						<image class="iv"></image>
						<view class="pupTitleTv"></view>
						<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
					</view>

					<view class="info">
						<image class="infoIv" :src="shopImg"></image>
						<view class="infoRightV">
							<view class="pupinfoTv1">{{shopTitle}}</view>
							<view class="pupinfoTv2">¥{{shopMoney*orderNum}}</view>
							<view class="pupinfoTv3">商品编号：{{shopNum}}</view>
						</view>
					</view>

					<view class="yanseV">颜色</view>
					<view class="biaoqianVV">
						<view class="biaoqianV" v-for="(item,index) in orderSpec" :key="index">
							<u-tag @click="onAddtagClick(item,index)" :text="item.value[0]" :plain="index==shopPos"
								bgColor="#00000000" :borderColor="index==shopPos?'#E6A5B4':'#939393'"
								:color="index==shopPos?'#E6A5B4':'#ffffff'" shape="circle" type="warning"></u-tag>
						</view>
					</view>

					<view class="shuliangV">
						<view class="shuliangTv">数量</view>
						<u-number-box buttonSize="25" :integer="true" bgColor="#939393" @input="onInput"
							v-model="orderNum"></u-number-box>
					</view>

				</view>
				<view class="pupbottomV">
					<view class="bt2" @click="onAddShop">加入购物车</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				leftList: [],
				leftPos: 0,
				rightList: [],
				rightPos: -1,
				itemId: '', //首页传过来的

				orderNum: 1,
				orderSpec: [], //规格
				shopImg: '',
				shopTitle: '',
				shopMoney: '', //
				shopNum: '', //编号
				shopPos: -1,
			}
		},
		onLoad(e) {
			this.itemId = e.id;
			this.getShopCategoryAll();
		},
		methods: {
			onLeftItemClick(item, index) {
				this.leftPos = index;
				this.getShopCategoryAllList();
			},
			onRightItem(item) {
				this.$u.route({
					url: "/shop/commodity/details",
					params: {
						id: item.product_id
					}
				})
			},
			getShopCategoryAll() {
				this.$api.getShopCategoryAll({}).then((res) => {
					this.leftList = res;

					console.log("----", this.itemId)
					if (this.itemId != undefined && this.itemId.length > 0) {
						this.leftList.map((item, index) => {
							if (this.itemId == item.id) {
								this.leftPos = index;
							}
						})
						console.log("----", this.leftPos)
					} else {
						this.leftPos = 0;
					}

					this.getShopCategoryAllList();
				}).catch((e) => {

				})
			},
			getShopCategoryAllList() {
				this.rightList = [];
				this.$api.getShopCategoryAllList({
					sid: this.leftList[this.leftPos].id
				}).then((res) => {
					this.rightList = res;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "添加失败" : e.msg)
				})
			},
			onAddClick(res, inex) { //添加购物车

				this.shopImg = res.image;
				this.shopTitle = res.title;
				this.shopMoney = res.sales_price;
				this.shopNum = res.product_id;
				this.orderSpec = res.spec_table_list;

				this.$refs.popup.open()

			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onAddtagClick(item, index) { //选择规格
				this.shopPos = index;
				this.shopMoney = item.sales_price
			},
			onAddShop() {
				if (this.orderSpec.length > 0 && this.shopPos == -1) {
					uni.$u.toast("请选择商品规格")
					return
				}
				this.$api.getShopAdd({
					id: this.shopNum,
					spec: this.orderSpec.length ? this.orderSpec[this.shopPos].code : '',
				}).then((res) => {
					this.$refs.popup.close()
					uni.$u.toast("添加成功");

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "添加失败" : e.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.centV {
		width: 100%;
		height: 100%;
		display: flex;
		flex: 1;
	}

	.leftV {
		flex: 0.3;
		background-color: #383838;
	}

	.rightV {
		flex: 0.7;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.leftItemV {
		height: 90rpx;
		background: #383838;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
	}

	.leftItemVTo {
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
	}

	.rightItemV {
		display: flex;
		border-radius: 10rpx;
		width: 100%;
		height: 200rpx;
		background-color: #383838;
		margin-bottom: 30rpx;
	}

	.rightIv {
		width: 200rpx;
		min-width: 200rpx;
		height: 200rpx;
		background-color: antiquewhite;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
	}

	.rightItemVV {
		flex: 1;
		padding-left: 10rpx;
		padding-right: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.rightTitle {
		width: 100%;
		font-size: 28rpx;
		color: #F9F9F9;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rightMoneyV {
		display: flex;
		align-items: baseline;
	}

	.rightMoneyTv1 {
		font-size: 24rpx;
		color: #E6A5B4;
	}

	.rightMoneyTv2 {
		font-size: 32rpx;
		color: #E6A5B4;
		margin-left: 6rpx;
	}

	.rightNumV {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rightNumTv {
		font-size: 22rpx;
		color: #AAAAAA;
	}

	.rightNumIv {
		width: 30rpx;
		height: 30rpx;
	}

	.popupBg {
		height: 900rpx;
		display: flex;
		flex-direction: column;
	}

	.titleV {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		box-sizing: border-box;

		.iv {
			width: 42rpx;
			height: 42rpx;
		}

		.titleTv {
			color: #e8e8e8;
			font-size: 36rpx;
			max-width: 450rpx;
			min-width: 450rpx;
		}

	}

	.pupTopV {
		height: 740rpx;
		padding-bottom: 160rpx;
		overflow-y: scroll;
	}

	.pupbottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 99;
	}

	.info {
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.infoIv {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
		background-color: antiquewhite;
	}

	.infoRightV {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-left: 30rpx;
	}

	.pupinfoTv1 {
		font-size: 32rpx;
		color: #F9F9F9;
	}

	.pupinfoTv3 {
		font-size: 28rpx;
		color: #9B9B9B;
		padding-right: 10rpx;
	}

	.pupinfoTv2 {
		font-size: 36rpx;
		color: #E6A5B4;
	}

	.yanseV {
		margin-top: 50rpx;
		font-size: 32rpx;
		color: #939393;
		margin-left: 30rpx;
	}

	.shuliangV {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.shuliangTv {
		font-size: 32rpx;
		color: #939393;
	}

	.biaoqianVV {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.biaoqianV {
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.bt2 {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		background: #CEF743;
		border-radius: 10rpx;
		color: #333333;
		font-size: 32rpx;
	}
</style>
